<template>
    <div>
        <el-table :data="budgetData"  border>
            <el-table-column fixed prop="time" label="日期" width="110" />
            <el-table-column prop="typeName" label="分类" width="80" v-if="budgetType==0"/>
            <el-table-column prop="typeName2" label="分类" width="80" v-if="budgetType==1"/>
            <el-table-column prop="amount" label="金额" width="80" />
            <el-table-column prop="memberName" label="成员" width="80" />
            <el-table-column prop="beneficiary" label="商家" width="120" v-if="budgetType==1"/>
            <el-table-column prop="description" label="描述" width="250" />
        </el-table>
        <div class="paganation">
            <el-pagination v-model:current-page="page.page" v-model:page-size="page.pageSize"
                layout="prev, pager, next" :total="total" @current-change="$emit('pageChange',page)" />
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import { IncomeItemForDisplay } from '@/types/income';
import { ExpenseItemForDisplay } from '@/types/expense';
import { PageInfo } from '@/types/config';
defineProps<{
    budgetData:IncomeItemForDisplay[]|ExpenseItemForDisplay[],
    budgetType:number,
    total:number
}>()

let page = reactive<PageInfo>({
    page:1,
    pageSize:10
})

defineEmits(['pageChange'])

</script>

<style scoped>
.paganation {
            margin-top: 40px;
        }
</style>